<script setup lang="ts">
import { ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import Waring from '@/assets/image/warning.svg';
import { InheritedRoleStatus, LineStatus, RoleAuthBool } from '@/constants/RoleAuthorization';
import { formatTimestampToLocalDateString } from '@/utils/TimeFormatUtil';
import { useRole } from './hooks/UserRole';
import style from './index.module.scss';
import RoleAuthorizationDialog from './role-authorization-dialog/index.vue';

defineOptions({
  name: 'RoleAuthorization',
});

const { t } = useI18n();
const { column, orgTreeCode, orgTreeCodeArray, allTableParams, searchData, handleNodeClick, treeClearSearchValue, currentNodeKey, fetchData, requestTreeData } = useRole();
const currentValue = ref({});
const treeTablePageRef = ref();
const dialogVisible = ref<boolean>(false);

function handleAuthorize(row: any) {
  dialogVisible.value = true;
  currentValue.value = row;
}

function refreshTable() {
  fetchData(allTableParams.value);
}

watch(dialogVisible, (newVal) => {
  if (!newVal) {
    refreshTable();
  }
});
</script>

<template>
  <div :class="style['custom-tree-table-role']">
    <TreeTablePage
      ref="treeTablePageRef"
      v-model:tree-current-node-key="currentNodeKey"
      :title="t('authorization.systemAdmin')"
      :column="column"
      select-action
      show-search
      :operations="['authorize']"
      :fetch-data="fetchData"
      :grid="{ minColumns: 1, maxColumns: 2, labelCol: 6, wrapperCol: 10 }"
      :search-tree-config="{
        requestData: requestTreeData,
        searchData,
        allowEdit: false,
        nodeKey: 'code',
        hasGroup: true,
        lazy: true,
        defaultExpandedKeys: orgTreeCodeArray,
        expandOnClickNode: false,
        textConfig: {
          searchPlaceholder: t('authorization.treePlaceholder'),
        },
      }"

      @authorize-click="handleAuthorize"
      @tree-node-click="handleNodeClick"
      @tree-clear-search-value="treeClearSearchValue"
    >
      <template #column-status="{ value }">
        <div class="status-item">
          <div class="status-dot" :class="value === LineStatus.ONLINE ? 'online' : 'offline'" />
          <span class="status-value">{{ value === LineStatus.ONLINE ? t('authorization.active') : t('authorization.inactive') }}</span>
        </div>
      </template>

      <template #column-orgLevel="{ value }">
        <span class="status-value">{{ value === 'CURRENT' ? t('authorization.current') : t('authorization.high') }}</span>
      </template>

      <template #column-subVisible="{ value }">
        <span class="status-value">{{ value === RoleAuthBool.AUTH_NO ? t('authorization.no') : t('authorization.yes') }}</span>
      </template>

      <template #column-createTime="{ value }">
        <span class="status-value">{{ value ? formatTimestampToLocalDateString(value) : value }}</span>
      </template>

      <template #column-updateTime="{ value }">
        <span class="status-value">{{ value ? formatTimestampToLocalDateString(value) : value }}</span>
      </template>

      <template #column-inheritedRoleName="{ value, row }">
        <div class="cell-content-popover" :style="{ width: row.inheritedRoleStatus === InheritedRoleStatus.EIGHTY_PERCENT ? '80%' : '100%' }">
          <div class="inherited-text">
            {{ row.inheritedOrgName && value ? `${row.inheritedOrgName}/${value}`
              : value || row.inheritedOrgName }}
          </div>
          <div v-if="row.inheritedRoleStatus === InheritedRoleStatus.EIGHTY_PERCENT">
            <el-popover
              placement="top"
              trigger="hover"
              :content="t('authorization.inheritedRoleUnavailable')"
              popper-class="custom-inherited-popover"
            >
              <template #reference>
                <Waring />
              </template>
            </el-popover>
          </div>
        </div>
      </template>
    </TreeTablePage>
  </div>
  <RoleAuthorizationDialog
    v-model:visible="dialogVisible"
    :role-data="currentValue"
    :org-tree-code="orgTreeCode"
  />
</template>
